<?php if(!defined('IN_FIRADIO')) {header('HTTP/1.1 403 Forbidden');exit('<h1>Access Denied</h1>');}?>
<?php $GLOBALS['script'][] = function() {?><script>
vue.data.disabled = 0;
vue.data.form.amount = 0;
vue.data.choice_row = {};
vue.data.apidata = {};
vue.data.display_field = {};
vue.data.display_field.created = true;
vue.data.display_field.note = false;
vue.data.display_field.username = true;
vue.data.display_field.amount = true;
vue.data.display_field.amount_refund = true;
vue.data.display_field.process_message = false;
var submit_after_result = function (that) {
};
function intval(i) {
    var i = parseInt(i, 10);
    if (isNaN(i)) i = 0;
    return i;
}
vue.methods.submit = function () {
    const form = {};
    this.ApiPost('/panel/yun/ntuser/order.php', form).then(function (data) {
        vue.data.apidata = data.data;
        submit_after_result();
    }, function (data) {
        console.log('reject:', data);
        submit_after_result();
    }).catch(function (reason) {
        console.log('catch:', reason);
        submit_after_result();
    })
};
vue.methods.toTop = function() {
    top.document.documentElement.scrollTop = 0;
    top.document.getElementById('iframe_content').height = 0;
};
vue.methods.op = function (row) {
    vue.data.choice_row = row;
    vue.methods.toTop();
    vue.data.form.order_id = row.id;
    vue.data.form.amount = row.amount;
    console.log(row);
};
vue.methods.submit_refund = function () {
    vue.data.disabled++;
    const form = window.clone(vue.data.form);
    this.ApiPost('/panel/yun/ntuser/refund.php', form).then(function (res) {
        //vue.data.apidata = res.data;
    }, function (res) {
        console.log('reject:', res);
    }).catch(function (reason) {
        console.log('catch:', reason);
    }).then(function () {
        vue.data.disabled--;
    });
};
vue.mounted = function () {
    vue.methods.submit();
};
</script><?php }?>

<div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">充值记录</h3>
                <div class="pull-right">
                    <a class="btn btn-primary btn-xs" type="button" target="_parent" href="/panel.html#/panel/index.html">返回首页</a>
                    <a class="btn btn-primary btn-xs" type="button" target="_parent" href="/panel.html#/panel/yun-nthostlist.html">选购主机</a>
                </div>
            </div>

            <div v-if="apidata.rows">
                <div style="padding-left: 20px;">
                    显示列：
                    <label><input v-model="display_field.created" type="checkbox" />充值时间</label>
                    <label><input v-model="display_field.note" type="checkbox" />充值方式</label>
                    <label><input v-model="display_field.wxpay" type="checkbox" />付款微信</label>
                    <label><input v-model="display_field.username" type="checkbox" />用户名</label>
                    <label><input v-model="display_field.amount" type="checkbox" />充值金额</label>
                    <label><input v-model="display_field.amount_refund" type="checkbox" />已退金额</label>
                    <label><input v-model="display_field.process_message" type="checkbox" />状态</label>
                </div>
                <div v-if="apidata.rows.length>0">
                    <table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
                        <thead>
                            <tr role="row">
                                <th v-if="display_field.created">充值时间</th>
                                <th v-if="display_field.note">充值方式</th>
                                <th v-if="display_field.wxpay">付款微信</th>
                                <th v-if="display_field.username">用户名</th>
                                <th v-if="display_field.amount">充值金额</th>
                                <th v-if="display_field.amount_refund">已退金额</th>
                                <th v-if="display_field.process_message">状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr role="row" class="odd" v-for="row in apidata.rows">
                              <td v-if="display_field.created">{{(row['created'])}}</td>
                              <td v-if="display_field.note">{{(row['note'])}}</td>
                              <th v-if="display_field.wxpay">
                                <img v-if="row['wxpay_headimgurl']" width="20" height="20" :src="row['wxpay_headimgurl']"/>
                                {{row['wxpay_nickname']}}
                              </th>
                              <td v-if="display_field.username">{{row['username']}}</td>
                              <td v-if="display_field.amount">{{(row['amount'])}}</td>
                              <td v-if="display_field.amount_refund">
                                <span v-if="row['amount_refund']>0">{{(row['amount_refund'])}}</span>
                                <span v-else>未退款</span>
                              </td>
                              <td v-if="display_field.process_message">{{(row['process_message'])}}</td>
                              <td>
                                <button v-if="row['amount_refund']<row['amount']" type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#modal-default" v-on:click="op(row)">退款</button>
                                <span v-else>已退完</span>
                              </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div v-else style="text-align:center">
                    暂无记录
                </div>
            </div>
            <div v-else style="text-align:center">
                <h3>数据载入中，请稍候...</h3>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6">
        <div class="box box-info">
            <div class="box-header with-border">
                <i class="fa fa-info-circle"></i>
                <h3 class="box-title">温馨提醒</h3>
            </div>
            <div class="box-body">
                <ol>
                    <li>
                        关于【退款】与【提款】的区别
                        <ul>
                            <li>
                                【退款】只能原路退回，免手续费，例如：用<b>张三</b>微信号充值的钱只能退回到<b>张三</b>的微信号。
                            </li>
                            <li>
                                【提款】可提款到您指定的任意账号，需支付1%~2%的手续费。
                            </li>
                        </ul>
                        关于【退款】限制
                        <ul>
                            <li>
                                14天内充值的余额可以秒退，且实时到账。
                            </li>
                            <li>
                                如果您要退回14天前充值的余额，请联系客服退款。
                            </li>
                        </ul>
                    </li>
                </ol>
            </div>
        </div>
    </div>

</div>

<div class="modal fade" id="modal-default" style="display: none;">
  <div class="modal-dialog">
    <form class="modal-content form-horizontal" v-on:submit="submit_refund();" onsubmit="return false;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span></button>
        <h4 class="modal-title">申请退款</h4>
      </div>
      <div class="box-body">
        <div class="form-group">
            <label for="amount" class="col-sm-3 control-label">退款金额(元)</label>
            <div class="col-sm-9">
                <input type="text" class="form-control"
                id="amount"
                v-model="form.amount"
                :disabled="disabled>0"
                placeholder="退款金额(元)" />
            </div>
        </div>
        <div class="form-group">
            <label for="reason" class="col-sm-3 control-label">退款原因</label>
            <div class="col-sm-9">
                <input type="text" class="form-control"
                id="reason"
                v-model="form.reason"
                :disabled="disabled>0"
                required
                placeholder="请告诉我们您要退款的原因，我们会做的更好！" />
            </div>
        </div>
        <div class="form-group">
            <label for="reason" class="col-sm-3 control-label">退款到微信</label>
            <div class="col-sm-9">
                <img v-if="choice_row['wxpay_headimgurl']" width="20" height="20" :src="choice_row['wxpay_headimgurl']"/>
                {{choice_row['wxpay_nickname']}}
                <br />
                <label><input type="checkbox" required />确认这是我本人微信</label>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <font color="red" class="pull-left" style="text-align: left;">⚠️注意：退款将原路退回且无法撤销<br />请再次确认该订单是您本人充值！</font>
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary" :disabled="disabled>0">立即退款</button>
      </div>
    </form>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
